<%@ taglib uri="/tld/extremecomponents" prefix="ec" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ page import="java.util.ArrayList;" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script src="../js/echarts.min.js"></script>
	
	<link rel="stylesheet" href="<%=request.getContextPath() %>/css/bootstrap.min.css"/><!--栅格布局-->
	<link rel="stylesheet" href="<%=request.getContextPath() %>/css/templatemo-style.css"/>
	
<title>学习轨迹图</title>
</head>
<body bgcolor="#DAEEF3" style="overflow-Y: hidden; overflow-x: hidden;" id = "reportsPage">
<!--从后台取出数据-->
	<%
		ArrayList<String> workNamelist = (ArrayList<String>)request.getSession().getAttribute("workNamelist");
		ArrayList<String> locusScorelist = (ArrayList<String>)request.getSession().getAttribute("locusScorelist");
		%>
		
            	
                <div id="container1" style="height:550px;background:#DAEEF3; color:#FFF">
    			<script type="text/javascript">
        			// 基于准备好的dom，初始化echarts实例
        			var myChart = echarts.init(document.getElementById('container1'));
        
    				var list = new Array();
    				var title = new Array();
					<%for(int i = 0; i < locusScorelist.size(); i++){%>  
						list[<%=i%>]=<%=locusScorelist.get(i)%>;
						
	 				<%}%>
	 				<%for(int i = 0; i < workNamelist.size(); i++){%>  
					title[<%=i%>]="<%=workNamelist.get(i)%>";
					
 				<%}%>
	 				
        			// 指定图表的配置项和数据
        			var option = {
            			title: {
                			text: '学生学习轨迹'
            			},
            			tooltip: {},
            			legend: {
            				orient: 'vertical',
            				left: 'right',
                			data:['相似度']
            			},
            			xAxis: {
                			data: title
            			},
            			yAxis: {},
            			series: [{
                			name: '学习轨迹',
                			type: 'line',
                			markLine:{
                				/*以下设置一行后，平均线就没有开始和结束标记了（即看不见箭头了）*/
                				symbol:"none",
                				lineStyle:{
		            				normal:{
            							color:"yellow",
            							width:2
            							//type:"solid",
            						}
            					},
                				data: [{
                					//name: '平均线',
    								// 支持 'average', 'min', 'max'
    	            				//type: 'average',
    	            				yAxis: 0.50,name:'相似度低'
                				},{
    	            				yAxis: 0.70,name:'相似度中等'
                				},{
    	            				yAxis: 0.90,name:'相似度较高'
                				}]
                			},
                			data: list
            			}]
        			};

        			// 使用刚指定的配置项和数据显示图表。
        			myChart.setOption(option);
    			</script>
			</div>
</body>
</html>